<template>
  <div class="custom-search-form">
    <el-form
      :inline="true"
      :model="formInline"
      :label-width="labelWidthStr"
      :label-position="labelPosition"
    >
      <el-form-item
        v-for="item in data"
        :key="item.index"
        :label="item.title"
      >

        <div v-if="item.type === 'input'">
          <el-input
            v-model="formInline[item.key]"
            v-bind="item.attr"
          />
        </div>

        <div v-if="item.type === 'select'">
          <el-select
            v-model="formInline[item.key]"
            v-bind="item.attr"
          >
            <el-option
              v-for="items in item.options"
              :key="items.value"
              :title="items.label"
              :label="items.label"
              :value="items.value"
            />
          </el-select>
        </div>

        <div v-if="item.type === 'time'">
          <el-date-picker
            v-model="formInline[item.key]"
            type="daterange"
            v-bind="item.attr"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          />
        </div>

        <div class="input-arrow" v-if="item.type === 'arrow'">
          <div class="input-box">
            <el-input
              v-model="formInline[item.key]"
              v-bind="item.attr"
            />
            <div class="input-arrow-box">
               <span></span>
              <span></span>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item class="searchButtonList">
        <el-button
          class="submit"
          type="primary"
          @click.stop="search"
        >
          搜索</el-button>
        <el-button
          class="reset"
          @click.stop="reset"
          :disabled="disableValue"
        >
          重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'TabSearch',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    // 自定义label-width长度
    labelWidth: {
      type: String,
      default: () => ''
    },
    labelPosition: {
      type: String,
      default: 'right'
    },
    otherType: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      disableValue: false,
      // 自定义表头长度
      labelWidthStr: this.labelWidth || '100px',
      // 内容数据
      formInline: {}
    }
  },
  computed: {},
  methods: {
    // 点击搜索
    search() {
      // 时间处理
      if(this.formInline['create_date'] instanceof Array && this.formInline['create_date'].length ===2) {
        let dateList = JSON.parse(JSON.stringify(this.formInline['create_date']))
        this.formInline.beginTime = this.formInline['create_date'][0]
        this.formInline.endTime = this.formInline['create_date'][1]
        delete(this.formInline["create_date"]);
      }
      this.$emit('searchForm', this.formInline, this.otherType)
    },
    // 点击重置
    reset() {
      this.formInline = {}
      this.$emit('resetForm', '')
    }
  },
  watch: {
    // 重置按钮的禁用
    formInline: {
      handler(val) {
        if(JSON.stringify(val) === "{}") {
          this.disableValue = true
        } else {
          this.disableValue = false
        }

      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-search-form {
  display: flex;
  .input-arrow {
    //  width: 190px;
    //  padding: 0 15px;
    //  box-sizing: border-box;
    position: relative;
    .input-arrow-box {
      position: absolute;
      top: 30%;
      right: 15px;
      display: flex;
      flex-direction: column;
      span {
        display: inline-block;
        border:5px solid transparent;//透明边bai框
        // border-bottom-color:#ff0000;//红色底边框，也就是红色箭头du
        cursor: pointer;
      }
      span:nth-of-type(2) {
        border-top-color:#D9DCE0;
        border-bottom: none;
      }
      span:nth-of-type(1) {
        border-bottom-color:#D9DCE0;
        border-top: none;
        margin-bottom: 5px;
      }
    }
  }
}
</style>
